<template>
  <!-- 学习进度 -->
  <view class="indexTeaching__header">
    <view class="header__title">
      {{ type === 'questions' ? courses[indexSub].courses_name : courses[indexSub].courses_name}}
      <text
        class="study_code"
      >({{type === 'questions' ? courses[indexSub].courses_code : courses[indexSub].courses_code}})</text>
    </view>
    <view class="header__status">
      <!-- <u-circle-progress active-color="#2447FF" :percent="percent" border-width="30" width="230">
                <slot name="left"></slot>
      </u-circle-progress>-->
      <view class="cmd-circle">
        <cmd-progress
          :percent="percent"
          stroke-color="#2447FF"
          :width="100"
          :stroke-width="10"
          type="circle"
          :showInfo="false"
        ></cmd-progress>
        <view class="cmd-circle-text">
          <slot name="left"></slot>
        </view>
      </view>

      <view class="header__status_time">
        <view class="item left_line">
          <slot name="middle"></slot>
        </view>
        <view class="item">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * studyPlan 学习面板组件
 */
import uCircleProgress from "@/components/u-circle-progress/u-circle-progress";
import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";
import { mapGetters } from "vuex";
export default {
  name: "studyPlan",
  components: {
    uCircleProgress,
    cmdProgress
  },
  props: {
    percent: {
      type: Number,
      default: 60
    },
    type: {
      type: String,
      default: "questions"
    }
  },
  computed: {
    ...mapGetters(["courses", "questionsSub", "indexSub"])
  },
  data() {
    return {
      index: -1
    };
  },
  mounted() {
    const { questionsSub, indexSub, type } = this;
    if (type === "questions") {
      this.index = questionsSub;
    } else {
      this.index = indexSub;
    }
  },
  methods: {}
};
</script>

<style lang="scss" scope>
.indexTeaching__header {
  padding: 43rpx 27rpx;
  border-bottom: 1px solid #ededed;
  .header__title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
    .study_code {
      color: #666;
      font-size: 28rpx;
      font-weight: normal;
    }
  }
  .header__status {
    display: flex;
    font-size: 32rpx;
    justify-content: space-between;
    align-items: center;
    .cmd-circle {
      display: flex;
      justify-content: center;
      position: relative;
      .cmd-circle-text {
        position: absolute;
        text-align: center;
        top: 30%;
      }
    }
    .header__status_time {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .item {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-weight: 500;
        color: #999;
        text-align: center;
      }
      .left_line {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          right: 0;
          top: 23%;
          width: 2px;
          height: 40rpx;
          display: block;
          background-color: #dedede;
        }
      }
    }
  }
}
</style>
